import React from 'react';

import './SellCategory.scss';
import SvgIcon from '@/components/SvgIcon';
import Link from 'next/link';

function SellCategory() {
  const cateList = [
    {
      name: 'Appliances',
      link: '/categories/appliances.html',
      image: 'https://www.my-company.net.cn/dstheme/images/Appliances.svg',
      title: 'Appliances',
    },
    {
      name: 'BabyKids',
      link: '/categories/baby-kids.html',
      image:
        'https://www.my-company.net.cn/dstheme/images/Baby%20&%20Kids.svg',
      title: 'Baby & Kids',
    },
    {
      name: 'Fitness',
      link: '/categories/sports-fitness.html',
      image: 'https://www.my-company.net.cn/dstheme/images/Fitness.svg',
      title: 'Fitness',
    },
    {
      name: 'Furniture',
      link: '/categories/furniture.html',
      image: 'https://www.my-company.net.cn/dstheme/images/Furniture.svg',
      title: 'Furniture',
    },
    {
      name: 'HomeGarden',
      link: '/categories/home-garden.html',
      image:
        'https://www.my-company.net.cn/dstheme/images/Home%20&%20Garden.svg',
      title: 'Home & Garden',
    },
    {
      name: 'Tools',
      link: '/categories/tools.html',
      image: 'https://www.my-company.net.cn/dstheme/images/Tools.svg',
      title: 'Tools',
    },
  ];

  return (
    <div className="sell-category main-width">
      <div className="sell-category-inner content-width">
        <div className="sell-category-hd flex-row items-center">
          <div className="title floor-hd-title">SELL BY CATEGORY</div>
          <div className="line floor-hd-line"></div>
        </div>
        <div className="sell-category-bd">
          <div className="category-list flex-row">
            {cateList.map((item, index) => (
              <div className="category-item" key={index}>
                <Link className="link" href={item.link}>
                  <SvgIcon
                    name={item.name}
                    width={'100%'}
                    height={'auto'}
                    color="#f3c4db"
                    hoverColor="#DFA5C3"
                  />
                  <div className="title">{item.title}</div>
                </Link>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default SellCategory;
